<template>
  <div class="guanlileixing">
    <el-dialog title="自定义任务类型" center :visible.sync="log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false" >
    	<div class="kflexc">
          <div class="li kflexc" v-for="item in list" :key="item.id">
            <div style="margin-right: 20px;">{{item.title}}</div>
            <div style="cursor: pointer;" @click="shanchu(item.id)"><i class="el-icon-close"></i></div>
          </div>
      </div>
      <div class="kflexc" style="margin-top: 50px;">
        <el-input placeholder="请输入任务名称" style="width: 250px; margin-right: 20px;" v-model="title"></el-input>
        <el-button type="danger" round @click="xinzeng">添加</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="log = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  
  import axios from "axios";
  export default {
    name: 'guanlileixing',
    data() {
      return {
        log:true,
        list:"",
        title:""
      }
    },
    created() {
      this.getlist()
      
    },
    methods:{
      xinzeng:function(){
        axios.get('/api/plan-market/crowd/type/add?title='+this.title)
          .then(response => {
        		if(response.data.msg.code == 0){
        			this.$message({
        				type: 'success',
        				message: '新增成功!'
        			});
        			this.getlist()
              this.$emit('gengxin')
              this.title = ""
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
          })
      },
      shanchu:function(id){
        this.$confirm('确定要删除分类吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	axios.get('/api/plan-market/crowd/type/del?id='+id)
        	  .then(response => {
        			if(response.data.msg.code == 0){
        				this.$message({
        					type: 'success',
        					message: '删除岗位成功!'
        				});
        				this.getlist()
                this.$emit('gengxin')
        			}else{
        				this.$message.error(response.data.msg.info);
        			}
        	  })
        })
      },

      getlist:function(){
        axios.get("/api/plan-market/crowd/type/list")
          .then( response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .guanlileixing{
    .li{ background: rgb(245, 251, 255); border: 1px solid rgb(25, 137, 250); padding: 5px 10px; border-radius: 20px; margin-right: 20px; margin-bottom: 20px; color: rgb(3, 127, 255);}
  }
</style>
